<template>
  <vs-sidebar
    :background="$store.state.theme ? '#fff':'#000'"
    :textWhite="$store.state.theme ?false:true"
    :reduce="open"
    v-model="active"
    :key="keys"
    open
  >
    <template #logo>
      <img
        @click="$router.push('/home')"
        src="https://www.shejihz.com/wp-content/uploads/cx_img/356/d6d789af890aebae4d0a305d83100857-560x360-2-0.jpg"
        alt=""
      />
    </template>
    <vs-sidebar-item
      @click.native="toPage(item)"
      v-for="item in links"
      :key="item.topage"
      :id="item.topage"
    >
      <template #icon>
        <i :class="item.icon" />
      </template>
      {{ item.title }}
    </vs-sidebar-item>
    <template #footer>
      <vs-row justify="space-between">
        <span />
        <vs-avatar
          style="margin: 6px 12px"
          size="32"
          @click="open = !open"
          badge-color="danger"
          badge-position="top-right"
        >
          <i :class="open ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
        </vs-avatar>
      </vs-row>
    </template>
  </vs-sidebar>
</template>

<script>
export default {
  data () {
    return {
      links: [
        {
          title: "工作台",
          icon: "el-icon-menu",
          topage: "/selfinfo",
        },
        {
          title: "管理文章",
          icon: "el-icon-s-claim",
          topage: "/articleinfo",
        },
        { title: "创建文章", icon: "el-icon-s-order", topage: "/infoinfo" },
        {
          title: "评论管理",
          icon: "el-icon-s-comment",
          topage: "/comment",
        },
        {
          title: "用户留言",
          icon: "el-icon-message-solid  ",
          topage: "/usermess",
        },
        {
          title: "管理人员",
          icon: "el-icon-user-solid",
          topage: "/manager",
        },
        {
          title: "更多功能",
          icon: "el-icon-s-tools",
          topage: "/setting",
        },
      ],
      keys:1,
      active: this.$route.fullPath,
      open: false,
      activeclass: 0,
    }
  },
  watch: {
    $route () {
      this.active = this.$route.fullPath
    },
    '$store.state.theme'(){
      this.keys++
    }
  },
  methods: {
    toPage (item) {
      if (item.topage === this.$route.fullPath) return
      this.$router.push(item.topage)
    }
  },
};
</script>

<style lang="less" scoped>
.aside {
  position: fixed;
  .logo {
    display: flex;

    .log1 {
      margin: 20px 10px;
      width: 20px;
      height: 20px;
      margin-left: 20px;
      background-color: rgb(255, 92, 92);
      border-radius: 50%;
    }
    .log2 {
      margin: 20px 10px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: rgb(255, 188, 55);
    }
    .log3 {
      margin: 20px 10px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: rgb(14, 203, 68);
    }
  }
  width: 350px;
  .navegation {
    margin-top: 25px;
    width: 80%;
    border-radius: 10px;
    a {
      i {
        margin: 0 15px;
      }
      margin-top: 5px;
      display: block;
      padding: 20px;
      text-decoration: none;
      // letter-spacing: 2px;
      font-size: 14px;
      color: rgb(94, 90, 90);
      user-select: none;
      &:hover {
        background-color: rgb(230, 230, 230);
        border-radius: 0 30px 30px 0;
        color: #79bbff;
      }
    }
    .actived {
      background-color: rgb(232, 240, 254);
      border-radius: 0 30px 30px 0;
      color: rgb(26, 115, 232);
      pointer-events: none;
    }
  }
}
</style>